$(function () {
  var chartsObj = {
    timeCharts:null,
    editorCharts:null,
    productionMonth:[],//采油队月度任务
    yearProductionTask:[], //采油厂年度生产任务指标完成情况
    yearPetroleumTask:[], //采油厂年度原油交售完成情况
    singleMonthTask:[],//单井完成情况
    productionMonthTask:null //采油站数据
  };
  $.ajax({
    url:'../js/data.json',
    success:function (data) {
      console.log(data);
      yearProductionTask(data.yearProductionTask);
      initEditorCharts(data.yearProductionTask.total,'采油厂年度任务合计',['年计划', '年实产', '年超欠']);
      oilProductionMonthMeasure(data.oilProductionMonthMeasure);
      oilProductionMonthMeasure2(data.oilProductionMonthMeasure);
      initEditorCharts2(data.oilProductionMonthMeasure);
      productionMonthTask(data.productionMonthTask,'0');
      productionMonthTask2(data.productionMonthTask,'0');
      productionMonthTaskTotal(data.productionMonthTask,'0');
      chartsObj.productionMonthTask = data.productionMonthTask;
      chartsObj.productionMonth = data.productionMonth;
      chartsObj.yearProductionTask = data.yearProductionTask;
      chartsObj.yearPetroleumTask = data.yearPetroleumTask;
      chartsObj.singleMonthTask = data.singleMonthTask;
    }
  });
  //采油队月度任务情况
  function initTimeCharts (productionData) {
    chartsObj.timeCharts = echarts.init(document.getElementById('timeCharts'));
    chartsObj.timeCharts.clear();
    var productionName = [],monthlyPlan = [],monthChattels = [],monthSuperowe = [];
    productionData.productionList.forEach(function (data) {
      productionName.push(data.name);
      monthlyPlan.push(data.monthlyPlan);
      monthChattels.push(data.monthChattels);
      monthSuperowe.push(data.monthSuperowe);
    });

    var option = {
      title:{
        text:'采油队月度任务情况',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data:['月计划', '月实产', '月超欠'],
        x:'right',
        y:'5%',
        textStyle:{
          color:'#fff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'value',
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      yAxis : [
        {
          type : 'category',
          axisTick : {show: false},
          data : productionName,
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series : [
        {
          name:'月超欠',
          type:'bar',
          label: {
            normal: {
              show: true,
              position: 'inside'
            }
          },
          data:monthSuperowe
        },
        {
          name:'月实产',
          type:'bar',
          stack: '总量',
          label: {
            normal: {
              show: true
            }
          },
          data:monthChattels
        },
        {
          name:'月计划',
          type:'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'left'
            }
          },
          data:monthlyPlan
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  //合计
  function initEditorCharts (data,text,arrList) {
    chartsObj.editorCharts = echarts.init(document.getElementById('editorCharts'));
    chartsObj.editorCharts.clear();
    var chattels = data.chattels.split();
    var plan = data.plan.split();
    var superowe = data.superowe.split();
    var posList = [
      'left', 'right', 'top', 'bottom',
      'inside',
      'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
      'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    chartsObj.editorCharts.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: echarts.util.reduce(posList, function (map, pos) {
          map[pos] = pos;
          return map;
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    };

    chartsObj.editorCharts.config = {
      rotate: 0,
      align: 'center',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function () {
        var labelOption = {
          normal: {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
        };
        chartsObj.editorCharts.setOption({
          series: [{
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }]
        });
      }
    };


    var labelOption = {
      normal: {
        show: true,
        position: chartsObj.editorCharts.config.position,
        distance: chartsObj.editorCharts.config.distance,
        align: chartsObj.editorCharts.config.align,
        verticalAlign: chartsObj.editorCharts.config.verticalAlign,
        rotate: chartsObj.editorCharts.config.rotate,
        formatter: '{name|{a}}：{c}',
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: '#fff'
          }
        }
      }
    };
    var option = {
      color: ['#003366', '#006699', '#e5323e'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      title:{
        text:text,
        textStyle:{
          color:'#fff'
        }
      },
      legend: {
        data: arrList,
        left:'right',
        textStyle:{
          color:'#fff'
        }
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          data: ['合计'],
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series: [
        {
          name: arrList[0],
          type: 'bar',
          barGap: 0,
          label: labelOption,
          data: plan
        },
        {
          name: arrList[1],
          type: 'bar',
          label: labelOption,
          data: chattels
        },
        {
          name: arrList[2],
          type: 'bar',
          label: labelOption,
          data: superowe
        }
      ]
    };
    chartsObj.editorCharts.setOption(option);
  }
//采油厂年度生产任务指标完成情况
  function yearProductionTask (obj) {
    chartsObj.timeCharts = echarts.init(document.getElementById('timeCharts'));
    chartsObj.timeCharts.clear();
    var productionName = [],monthlyPlan = [],monthChattels = [],monthSuperowe = [];
    obj.monthData.forEach(function (data) {
      productionName.push(data.month);
      monthlyPlan.push(data.monthlyPlan);
      monthChattels.push(data.monthChattels);
      monthSuperowe.push(data.monthSuperowe);
    });

    var option = {
      title:{
        text:'采油厂年度原油交售情况',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data:['月计划', '月实产', '月超欠'],
        x:'right',
        y:'5%',
        textStyle:{
          color:'#fff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'value',
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      yAxis : [
        {
          type : 'category',
          axisTick : {show: false},
          data : productionName,
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series : [
        {
          name:'月超欠',
          type:'bar',
          label: {
            normal: {
              show: true,
              position: 'inside'
            }
          },
          data:monthSuperowe
        },
        {
          name:'月实产',
          type:'bar',
          stack: '总量',
          label: {
            normal: {
              show: true
            }
          },
          data:monthChattels
        },
        {
          name:'月计划',
          type:'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'left'
            }
          },
          data:monthlyPlan
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  //采油厂年度原油交售完成情况
  function yearPetroleumTask (obj) {
    chartsObj.timeCharts = echarts.init(document.getElementById('timeCharts'));
    chartsObj.timeCharts.clear();
    var productionName = [],monthlyPlan = [],monthChattels = [],monthSuperowe = [];
    obj.monthData.forEach(function (data) {
      productionName.push(data.month);
      monthlyPlan.push(data.monthlyPlan);
      monthChattels.push(data.monthChattels);
      monthSuperowe.push(data.monthSuperowe);
    });

    var option = {
      title:{
        text:'采油厂年度原油交售完成情况',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data:['月计划', '月实产', '月超欠'],
        left:'right',
        textStyle:{
          color:'#fff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'value',
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      yAxis : [
        {
          type : 'category',
          axisTick : {show: false},
          data : productionName,
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series : [
        {
          name:'月超欠',
          type:'bar',
          label: {
            normal: {
              show: true,
              position: 'inside'
            }
          },
          data:monthSuperowe
        },
        {
          name:'月实产',
          type:'bar',
          stack: '总量',
          label: {
            normal: {
              show: true
            }
          },
          data:monthChattels
        },
        {
          name:'月计划',
          type:'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'left'
            }
          },
          data:monthlyPlan
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  //单井完成情况
  function singleMonthTask (obj) {
    var charts = document.getElementById('timeCharts');
    chartsObj.timeCharts = echarts.init(charts);
    var productionName = [],monthlyPlan = [],monthChattels = [],monthSuperowe = [];
    obj.monthData.forEach(function (data) {
      productionName.push(data.month);
      monthlyPlan.push(Number(data.wetOil).toFixed(2));
      monthChattels.push(Number(data.cleanedOil).toFixed(2));
      monthSuperowe.push(Number(data.totalWaterCut).toFixed(2));
    });

    var option = {
      title:{
        text:'ZCW5208单井12月完成',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data:['含水油','净化油','含水率'],
        right:'15%',
        textStyle:{
          color:'#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: productionName,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '油',
          min: 0,
          max: 10,
          interval: 50,
          nameTextStyle:{
            color:'#fff'
          },
          axisLabel: {
            formatter: '{value}',
            textStyle:{
              color:'#fff'
            }
          }
        },
        {
          type: 'value',
          name: '含水率',
          min: 0,
          max: 100,
          interval: 5,
          nameTextStyle:{
            color:'#fff'
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series: [
        {
          name:'含水油',
          type:'bar',
          label:{
            show:false
          },
          data:monthlyPlan
        },
        {
          name:'净化油',
          type:'bar',
          label:{
            show:false
          },
          data:monthChattels
        },
        {
          name:'含水率',
          type:'line',
          yAxisIndex: 1,
          data:monthSuperowe
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  function singleMonthTaskTotal (obj) {
    var charts = document.getElementById('editorCharts');
    chartsObj.timeCharts = echarts.init(charts);
    var allCleanedOil = obj.allCleanedOil.split();
    var allWetOil = obj.allWetOil.split();
    var totalWaterCut = obj.totalWaterCut.split();
    var option = {
      title:{
        text:'ZCW5208单井12月完成合计',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data:['含水油','净化油','含水率'],
        left:'right',
        textStyle:{
          color:'#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['合计'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '油',
          //min: 0,
          //max: 10,
          interval: 50,
          nameTextStyle:{
            color:'#fff'
          },
          axisLabel: {
            formatter: '{value}',
            textStyle:{
              color:'#fff'
            }
          }
        },
        {
          type: 'value',
          name: '含水率',
          min: 0,
          max: 100,
          interval: 5,
          nameTextStyle:{
            color:'#fff'
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series: [
        {
          name:'含水油',
          type:'bar',
          data:allWetOil
        },
        {
          name:'净化油',
          type:'bar',
          data:allCleanedOil
        },
        {
          name:'含水率',
          type:'line',
          yAxisIndex: 1,
          data:totalWaterCut
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  window.addEventListener("resize",function () {
    chartsObj.timeCharts.resize();
    chartsObj.editorCharts.resize();
  });
  //采油队计量，实产对比
  function oilProductionMonthMeasure (obj) {
    chartsObj.timeCharts = echarts.init(document.getElementById('oilProductionMonthMeasure'));
    chartsObj.timeCharts.clear();
    var option = {
      title : {
        text: '采油队月度油井计量（含水油）对比情况',
        x:'center',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}"
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['测产油量','实际油量','油差'],
        textStyle:{
          color:'#fff'
        }
      },
      series : [
        {
          name: '羊马河采油队',
          type: 'pie',
          radius : '55%',
          center: ['50%', '60%'],
          data:[
            {value:obj.oilMeasure, name:'测产油量('+obj.oilMeasure+')',itemStyle:{
              color:'#9966ff'
            }},
            {value:obj.oilReality, name:'实际油量('+obj.oilReality+')',itemStyle:{
              color:'#3366ff'
            }},
            {value:obj.oilPoor, name:'油差('+obj.oilPoor+')',itemStyle:{
              color:'#e5323e'
            }}
          ]
          /*itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }*/
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  //采油队计量，实产对比
  function oilProductionMonthMeasure2 (obj) {
    chartsObj.timeCharts = echarts.init(document.getElementById('oilProductionMonthMeasure2'));
    chartsObj.timeCharts.clear();
    var option = {
      title : {
        text: '采油队月度油井计量（净油）对比情况',
        x:'center',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}"
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['测产液量','实际液量','液差'],
        textStyle:{
          color:'#fff'
        }
      },
      series : [
        {
          name: '羊马河采油队',
          type: 'pie',
          radius : '55%',
          center: ['50%', '60%'],
          data:[
            {value:obj.liquidMeasure, name:'测产液量('+obj.liquidMeasure+')',itemStyle:{
              color:'#669900'
            }},
            {value:obj.liquidReality, name:'实际液量('+obj.liquidReality+')',itemStyle:{
              color:'#336699'
            }},
            {value:obj.yePoor, name:'液差('+obj.yePoor+')',itemStyle:{
              color:'#e5323e'
            }}
          ]
          /*itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }*/
        }
      ]
    };
    console.log(option);
    chartsObj.timeCharts.setOption(option);
  };
  function initEditorCharts2 (data) {
    chartsObj.editorCharts = echarts.init(document.getElementById('editorCharts2'));
    chartsObj.editorCharts.clear();
    var liquidMeasure = data.liquidMeasure.split();
    var liquidReality = data.liquidReality.split();
    var oilMeasure = data.oilMeasure.split();
    var liquid = [];
    var oil = [];
    var poor = [];
    liquid.push(data.liquidMeasure,data.oilMeasure);
    oil.push(data.liquidReality,data.oilReality,);
    poor.push(data.yePoor,data.oilPoor)
    var posList = [
      'left', 'right', 'top', 'bottom',
      'inside',
      'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
      'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    chartsObj.editorCharts.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: echarts.util.reduce(posList, function (map, pos) {
          map[pos] = pos;
          return map;
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    };

    chartsObj.editorCharts.config = {
      rotate: 270,
      align: 'center',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function () {
        var labelOption = {
          normal: {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
        };
        chartsObj.editorCharts.setOption({
          series: [{
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }]
        });
      }
    };


    var labelOption = {
      normal: {
        show: true,
        position: chartsObj.editorCharts.config.position,
        distance: chartsObj.editorCharts.config.distance,
        align: chartsObj.editorCharts.config.align,
        verticalAlign: chartsObj.editorCharts.config.verticalAlign,
        rotate: chartsObj.editorCharts.config.rotate,
        formatter: '{name|{a}}：{c}',
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: '#fff'
          }
        }
      }
    };
    var option = {
      color: ['#003366', '#006699', '#e5323e'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      title:{
        text:'综合对比',
        textStyle:{
          color:'#fff'
        }
      },
      legend: {
        data: ['月计划', '月实产', '月超欠'],
        left:'right',
        textStyle:{
          color:'#fff'
        }
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          data: ['液量','油量'],
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series: [
        {
          name: '月计划',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          data: liquid
        },
        {
          name: '月实产',
          type: 'bar',
          label: labelOption,
          data: oil
        },
        {
          name: '月超欠',
          type: 'bar',
          label: labelOption,
          data: poor
        }
      ]
    };
    chartsObj.editorCharts.setOption(option);
  };
  //采油站月度任务情况
  function productionMonthTask (obj,index) {
    chartsObj.timeCharts = echarts.init(document.getElementById('productionMonthTask'));
    chartsObj.timeCharts.clear();
    var option = {
      title : {
        text:obj.monthPlan.ChattelsMonthPlan[index].name,
        subtext: '月度油井计量（含水油）对比情况',
        subtextStyle:{
          color:'#fff',
          fontSize:14
        },
        x:'center',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}"
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['计划含水油','实产含水油'],
        textStyle:{
          color:'#fff'
        }
      },
      series : [
        {
          name: obj.monthPlan.ChattelsMonthPlan[index].name,
          type: 'pie',
          radius : '55%',
          center: ['50%', '60%'],
          data:[
            {value:obj.monthPlan.ChattelsMonthPlan[index].allWetOilTask, name:'计划含水油('+obj.monthPlan.ChattelsMonthPlan[index].allWetOilTask + ')',itemStyle:{
              color:'#9966ff'
            }},
            {value:obj.monthPlan.ChattelsMonthPlan[index].allWetOil, name:'实产含水油('+obj.monthPlan.ChattelsMonthPlan[index].allWetOil + ')',itemStyle:{
              color:'#3366ff'
            }}
          ]
          /*itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }*/
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  function productionMonthTask2 (obj,index) {
    chartsObj.timeCharts = echarts.init(document.getElementById('productionMonthTask2'));
    chartsObj.timeCharts.clear();
    var option = {
      title : {
        text:obj.monthPlan.ChattelsMonthPlan[index].name,
        subtext: '月度油井计量（净油）对比情况',
        subtextStyle:{
          color:'#fff',
          fontSize:14
        },
        x:'center',
        textStyle:{
          color:'#fff'
        }
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}"
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['计划净化油','实产净化油','油差'],
        textStyle:{
          color:'#fff'
        }
      },
      series : [
        {
          name: obj.monthPlan.ChattelsMonthPlan[index].name,
          type: 'pie',
          radius : '55%',
          center: ['50%', '60%'],
          data:[
            {value:obj.monthPlan.ChattelsMonthPlan[index].allCleanedOilTask, name:'计划净化油('+obj.monthPlan.ChattelsMonthPlan[index].allCleanedOilTask+')',itemStyle:{
              color:'#9966ff'
            }},
            {value:obj.monthPlan.ChattelsMonthPlan[index].allCleanedOil, name:'实产净化油('+obj.monthPlan.ChattelsMonthPlan[index].allCleanedOil+')',itemStyle:{
              color:'#3366ff'
            }},
            {value:obj.monthPlan.ChattelsMonthPlan[index].monthSuperowe, name:'油差('+obj.monthPlan.ChattelsMonthPlan[index].monthSuperowe+')',itemStyle:{
              color:'#e5323e'
            }}
          ]
          /*itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }*/
        }
      ]
    };
    chartsObj.timeCharts.setOption(option);
  };
  function productionMonthTaskTotal (data,index) {
    chartsObj.editorCharts = echarts.init(document.getElementById('productionMonthTaskTotal'));
    chartsObj.editorCharts.clear();
    //var liquidMeasure = data.monthPlan.ChattelsMonthPlan.allWetOilTask.split();
    //var liquidReality = data.monthPlan.ChattelsMonthPlan.allWetOil.split();
    //var oilMeasure = data.oilMeasure.split();
    var liquid = [];
    var oil = [];
    var poor = [];
    var poor2 = (data.monthPlan.ChattelsMonthPlan[index].allWetOil - data.monthPlan.ChattelsMonthPlan[index].allWetOilTask).toFixed(2);
    liquid.push(data.monthPlan.ChattelsMonthPlan[index].allWetOilTask,data.monthPlan.ChattelsMonthPlan[index].allCleanedOilTask);
    oil.push(data.monthPlan.ChattelsMonthPlan[index].allWetOil,data.monthPlan.ChattelsMonthPlan[index].allCleanedOil);
    poor.push(poor2,data.monthPlan.ChattelsMonthPlan[index].monthSuperowe);
    var posList = [
      'left', 'right', 'top', 'bottom',
      'inside',
      'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
      'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    chartsObj.editorCharts.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: echarts.util.reduce(posList, function (map, pos) {
          map[pos] = pos;
          return map;
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    };

    chartsObj.editorCharts.config = {
      rotate: 270,
      align: 'center',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function () {
        var labelOption = {
          normal: {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
        };
        chartsObj.editorCharts.setOption({
          series: [{
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }, {
            label: labelOption
          }]
        });
      }
    };


    var labelOption = {
      normal: {
        show: true,
        position: chartsObj.editorCharts.config.position,
        distance: chartsObj.editorCharts.config.distance,
        align: chartsObj.editorCharts.config.align,
        verticalAlign: chartsObj.editorCharts.config.verticalAlign,
        rotate: chartsObj.editorCharts.config.rotate,
        formatter: '{name|{a}}：{c}',
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: '#fff'
          }
        }
      }
    };
    var option = {
      color: ['#003366', '#006699', '#e5323e'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      title:{
        text:data.monthPlan.ChattelsMonthPlan[index].name + '综合对比',
        textStyle:{
          color:'#fff'
        }
      },
      legend: {
        data: ['月计划', '月实产', '月超欠'],
        left:'right',
        textStyle:{
          color:'#fff'
        }
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          data: ['含水油','净化油'],
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel:{
            textStyle:{
              color:'#fff'
            }
          }
        }
      ],
      series: [
        {
          name: '月计划',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          data: liquid
        },
        {
          name: '月实产',
          type: 'bar',
          label: labelOption,
          data: oil
        },
        {
          name: '月超欠',
          type: 'bar',
          label: labelOption,
          data: poor
        }
      ]
    };
    chartsObj.editorCharts.setOption(option);
  };
  /*导航事件*/
  $('.navList li').click(function () {
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    if($(this).attr('value') == 1){
      initTimeCharts(chartsObj.productionMonth);
      initEditorCharts(chartsObj.productionMonth.total,'采油队月度任务合计',['月计划', '月实产', '月超欠'])
    }else if($(this).attr('value') == 2){
      yearProductionTask(chartsObj.yearProductionTask);
      initEditorCharts(chartsObj.yearProductionTask.total,'采油厂年度任务合计',['年计划', '年实产', '年超欠'])
    }else if($(this).attr('value') == 3){
      yearProductionTask(chartsObj.yearPetroleumTask);
      initEditorCharts(chartsObj.yearPetroleumTask.total,'采油厂年度原油交售情况',['年计划', '年实产', '年超欠'])
    }else if($(this).attr('value') == 4){
      singleMonthTask(chartsObj.singleMonthTask);
      singleMonthTaskTotal(chartsObj.singleMonthTask.total)
    }
  });
  $('.js-example-basic-single').select2();
  $('#changePro').change(function () {
    if($(this).val() == 2) {
      productionMonthTask (chartsObj.productionMonthTask,'1');
      productionMonthTask2 (chartsObj.productionMonthTask,'1');
      productionMonthTaskTotal (chartsObj.productionMonthTask,'1');
    }else{
      productionMonthTask (chartsObj.productionMonthTask,'0');
      productionMonthTask2 (chartsObj.productionMonthTask,'0');
      productionMonthTaskTotal (chartsObj.productionMonthTask,'0');
    }
  })
});